<template>
  <div class="container">
    <!-- 校徽 -->
    <div class="logo">
      <img class="logo-pic" src='@/assets/images/school_badge.png' />
    </div>
    <!-- 系统名称 -->
    <div class="title" :class="{ selected: isTitle}"
      @click="handleTitleClick"
    >
      <span>
        <span class="title-top">乐师在线</span>
        <span class="title-bottom">学习平台</span>
      </span>
    </div>
    <!-- 输入框 -->
    <div class="input">
      <input class="input-content" type="text" placeholder="寻找你的问题" />
      <img class="search" src="@/assets/images/search.png" />
    </div>
    <!-- 我要提问 -->
    <div class="add">
      <img class="add-pic" src="@/assets/images/add.png" />
      <span class="add-text">
        我要提问
      </span>
    </div>
    <!-- 发现 -->
    <div class="find" :class="{ selected: isFind }"
      @click="handleFindClick"
    >
      <span>发现</span>
    </div>
    <!-- 想法 -->
    <div class="think" :class="{ selected: isThink }"
      @click="handleThinkClick"
    >
      <span>想法</span>
    </div>
    <!-- 用户头像 -->
    <div class="user-pic">
      <img class="user-pic-content" src="static/images/user_pic1.jpg" />
    </div>
    <!-- 我的 -->
    <div class="mine" :class="{ selected: isMine }"
      @click="handleMineClick"
    >
      <span>我的</span>
    </div>
    <!-- 签到 -->
    <div class="sign">
      <img class="sign-pic" src="@/assets/images/sign_in.png" />
      <span class="sign-text">签</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderNav',
  data () {
    return {
      // 选中的类的背景颜色会改变, one two 变量是两个标识变量
      // false false -> 0 title
      // false true -> 1 find
      // true false -> 2 think
      // true true -> 3 mine
      one: false,
      two: false
    }
  },
  methods: {
    handleTitleClick () {
      // false false => 0 => title
      this.one = false
      this.two = false
    },
    handleFindClick () {
      // false true => 1 => find
      this.one = false
      this.two = true
    },
    handleThinkClick () {
      // true false => 2 => think
      this.one = true
      this.two = false
    },
    handleMineClick () {
      // true true => 3 => mine
      this.one = true
      this.two = true
    }
  },
  computed: {
    isTitle () {
      // false false => 0 => title
      return this.one === false && this.two === false
    },
    isFind () {
      // false true => 1 => find
      return this.one === false && this.two === true
    },
    isThink () {
      // true false => 2 => think
      return this.one === true && this.two === false
    },
    isMine () {
      // true true => 3 => mine
      return this.one === true && this.two === true
    }
  }
}
</script>

<style lang="stylus" scoped>
  // header 的高度
  $headerHeight = 86px
  // hover 时的背景颜色
  $hoverColor = #F6F6F6
  // 让其内元素垂直居中样式
  verticalCenter()
    display: flex
    align-items: center
    height: $headerHeight
  // 鼠标悬浮时的样式
  hoverStyle()
    background: $hoverColor
    cursor: pointer
    border-radius: 5px
  // padding 样式
  paddingStyle()
    padding: 0 12px

  // 被选中时的样式
  .selected
    background: #F6F6F6
    border-radius: 5px

  .container
    display: flex
    width: 100%
    height: 0
    padding-bottom: $headerHeight
    border-radius: 5px
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3)
    background: #E7E7E7
    .logo
      verticalCenter()
      margin-left: 10px
      margin-right: 5px
      .logo-pic
        width: 80px
        height: 80px
    .title:hover
      hoverStyle()
    .title
      paddingStyle()
      verticalCenter()
      font-size: 20px
      color: #735F19
      .title-top, .title-bottom
        display: block
        padding: 6px 0
    .input
      position: relative
      margin: 0 20px
      verticalCenter()
      .input-content
        border-radius: 3px
        width: 220px
        height: 30px
        padding-left: 6px
        padding-right: 40px
        background: #D4D4D4
      .search:hover
        hoverStyle()
      .search
        position: absolute
        right: 10px
        width: 24px
        height: 24px
    .add:hover
      hoverStyle()
    .add
      verticalCenter()
      paddingStyle()
      margin-right: 20px
      .add-container
        height: 24px
        line-height: 24px
        vertical-align: center
      .add-pic
        width: 24px
        height: 24px
        padding-right: 6px;
      .add-text
        font-size: 20px
    .find:hover, .think:hover, .mine:hover
      hoverStyle()
    .find, .think, .mine
      paddingStyle()
      verticalCenter()
      font-size: 26px
    .user-pic
      verticalCenter()
      margin-left: 20px
      margin-right: 5px
      .user-pic-content:hover
        cursor: pointer
      .user-pic-content
        width: 80px
        height: 80px
        border-radius: 40px
    .sign:hover
      cursor: pointer
      color: #fff
    .sign
      verticalCenter()
      position: relative
      margin-left: 10px
      .sign-pic
        width: 80px
        height: 80px
      .sign-text
        position: absolute
        font-size: 20px
        top: 34px
        left: 30px
</style>
